<template>
    <div class="item" ref="filterItemArea">
        <Row type="flex" align="middle">
            <Col :xs="6" :sm="6" :md="6" :lg="6"  style="padding-right: 5px">
                <Select v-model="rules[index].property" filterable @change="changeProperty">
                    <Option v-for="item in properties" :value="item.name" :key="item.name">{{ item.displayName }}</Option>
                </Select>
            </Col>
            <Col :xs="4" :sm="4" :md="4" :lg="4"  style="padding-right: 5px">
                <Select v-model="rules[index].operator" >
                    <Option v-for="item in operatorList" :value="item.name" :key="item.name">{{ item.displayName }}</Option>
                </Select>
            </Col>
            <Col v-if="valueType !== ''" :xs="8" :sm="8" :md="8" :lg="8"  style="padding-right: 5px">
                <Select v-if="valueType === 'select'" v-model="rules[index].values" filterable allow-create @on-create="onInput" multiple  @change="updateItemHeight" >
                    <Option v-for="item in valueList" :value="item.value" :key="item.value">{{ item.displayName }}</Option>
                </Select>
                <Input v-if="valueType === 'input'" v-model="rules[index].value" placeholder="" />
            </Col>
            <Col :xs="6" :sm="6" :md="6" :lg="6"  style="padding-right: 5px">
                <Button icon="ios-remove" @click="$parent.removeItem(index)"></Button>
                <Button icon="ios-add" v-if="isLast()" @click="$parent.addItem"></Button>
            </Col>
        </Row>
    </div>

</template>

<script>
    export default {
        name: "FilterItem",
        props: {
            properties: Array,
            index: Number,
            rules: Array
        },
        data() {
            return {
                valueList: [],
                source: null,
            }
        },
        computed: {
            operatorList: function() {
                if(this.propertyType === 'number') {
                    return [
                        {
                            name: 'equal',
                            displayName: '等于',
                            valueType: 'input'
                        },
                        {
                            name: 'notEqual',
                            displayName: '不等于',
                            valueType: 'input'
                        },
                        {
                            name: 'greater',
                            displayName: '大于'
                        },
                        {
                            name: 'greaterOrEqual',
                            displayName: '大于等于'
                        },
                        {
                            name: 'less',
                            displayName: '小于'
                        },
                        {
                            name: 'lessOrEqual',
                            displayName: '小于等于'
                        },
                        {
                            name: 'isSet',
                            displayName: '有值'
                        },
                        {
                            name: 'isNotSet',
                            displayName: '无值'
                        }
                    ];
                } else if(this.propertyType === 'string') {
                    return [
                        {
                            name: 'equal',
                            displayName: '等于'
                        },
                        {
                            name: 'notEqual',
                            displayName: '不等于'
                        },
                        {
                            name: 'contain',
                            displayName: '包含'
                        },
                        {
                            name: 'notContain',
                            displayName: '不包含'
                        },
                        {
                            name: 'isSet',
                            displayName: '有值'
                        },
                        {
                            name: 'isNotSet',
                            displayName: '无值'
                        }
                    ];
                } else if(this.propertyType === 'boolean') {
                    return [
                        {
                            name: 'isTrue',
                            displayName: '为真'
                        },
                        {
                            name: 'isFalse',
                            displayName: '为假'
                        },
                        {
                                name: 'isSet',
                            displayName: '有值'
                        },
                        {
                            name: 'isNotSet',
                            displayName: '无值'
                        }
                    ];
                }

            },
            propertyType: function() {
                for (let i = 0; i < this.properties.length; i++) {
                    if (this.properties[i].name === this.rules[this.index].property) {
                        return this.properties[i].type;
                    }
                }
                return 'number';
            },
            valueType: function() {
                if(this.propertyType === "boolean") {
                    return "";
                } else if(this.propertyType === "string") {
                    if(this.rules[this.index].operator.search("is") !== -1) {
                        return "";
                    } else if(this.rules[this.index].operator === "contain" || this.rules[this.index].operator === "notContain") {
                        return "input";
                    }
                    return "select";
                } else if(this.propertyType === "number") {
                    if(this.rules[this.index].operator.search("is") !== -1) {
                        return "";
                    }
                    return "input";
                }
                return "input";
            }
        },
        methods: {
            onInput(value){
                alert(value);
                this.valueList.push({
                    "value": value,
                    "displayName": value
                })
            },
            isLast: function() {
                return this.rules.length === (this.index + 1);
            },
            changeProperty: function(selectedValue) {
                this.rules[this.index].operator = this.operatorList[0].name;
                this.rules[this.index].value = "";
                this.rules[this.index].values.splice(0, this.rules[this.index].values.length);
                this.valueList.splice(0, this.valueList.length);
                this.getPropertyValues();
            },
            getPropertyValues: function() {
                let self = this;
                if(this.propertyType === "string") {
                    if (typeof this.source === 'function') {
                        this.source('取消上一次未完成的请求');
                    }
                    this.$axios.get(this.$api.report + "/analysis/event/property/" + this.rules[this.index].property + "/value", {
                            headers: {
                                "Authorization": "Bearer "+this.$sessionStore.fetch(),
                                "Accept": "application/json"
                            },
                            params: {
                                projectId: this.$store.state.projectId
                            },
                            cancelToken: new this.$axios.CancelToken( c => { // 设置 cancel token
                                this.source = c;
                            }),
                        }).then(response => {
                            if (response.status === 200) {
                                // this.valueList = response.data;
                                //限制值的长度不超过50，超出显示省略号，避免显示不友好
                                response.data.forEach((item, index) => {
                                    if(item.displayName.length > 50) {
                                        item.displayName = item.displayName.substr(0, 50) + "...";
                                    }
                                    this.valueList.push(item);
                                });
                                let arr  = [];
                                self.valueList.map((item,index)=>{
                                    arr.push(item.value);
                                });
                                self.rules[self.index].values.map((item,index)=>{
                                    if(arr.indexOf(item) === -1){
                                        self.valueList.push({
                                            displayName: item,
                                            value: item
                                        })
                                    }
                                })
                            }
                        })
                        .catch(error => {
                            console.error(error);
                        });
                }

            },
            updateItemHeight: function () {
                this.$nextTick(() => {
                    this.$parent.updateFilterItemHeight(this.index, this.$refs.filterItemArea.offsetHeight);
                })
            }

        },
        created() {
            if(this.rules[this.index].property === '') {
                this.rules[this.index].property = this.properties[0].name;
            }
            if(this.rules[this.index].operator === '') {
                this.rules[this.index].operator = this.operatorList[0].name;
            }
            this.getPropertyValues();
        },
        mounted() {
            this.updateItemHeight();
        }
    }
</script>

<style scoped>
    .item {
        padding: 0px 0px 10px 0px;
    }

</style>